<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Layui</title>
	<meta name="referrer" content="never"/>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!--<link rel="stylesheet" href="//chachuan.gitee.io/rml-blog-gitee/modules/layui/css/layui.css" media="all">-->
	<link rel="stylesheet" href="../../modules/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../../modules/layui/css/global.css">
	<!--<script src="//chachuan.gitee.io/rml-blog-gitee/modules/layui/layui.js"></script>-->
	<script src="../../modules/layui/layui.js"></script>
	<style type="text/css">
		html,body {
			height: 100%;
		}

		#layim_chat_main {
			position: relative;
			width: 100%;
			height: 100%;
			/*border: 5px solid #eeeeee;*/
			margin: 0 auto;
			/*border-radius: 10px;*/
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		.layim-chat-user cite i {
			padding-left: 5px !important;
		}

		.layim-chat-mine .layim-chat-user cite i {
			padding-right: 5px !important;
		}

		.layui-anim-rotate-wrap {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			width: 100px;
			height: 100px;
		}
		
		.layui-anim-rotate {
			font-size: 100px;
			color: #999;
		}
	</style>
</head>
<body>
<div id="layim_chat_main" class="layim-chat-main">
	<div class="layui-anim-rotate-wrap">
		<i class="layui-icon layui-icon-loading-1 layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
	</div>
</div>
<script type="text/javascript">
	layui.use(['layim', 'jquery'], function(){
		var layim = layui.layim;
		var $ = layui.jquery;

		$.getJSON('wxl-dx-2.json', data => {
			var html = '<ul>';
			data.sort(function(a, b){
				return new Date(a['Time']).getTime() - new Date(b['Time']).getTime();
			});
			$.each(data, function(index, item){
				item.Content = (item.Content || '').replace(/\\n/g, '<br/>');
				if(item.Source === 'To'){
					html +=
						`<li class="layim-chat-mine">
							<div class="layim-chat-user">
								<img src="//chachuan.gitee.io/rml-blog-gitee/imgs/00.jpg" alt="">
								<cite><i>${item.Time}</i>Mine</cite>
							</div>
							<div class="layim-chat-text">${item.Content}</div>
						</li>`;
				}else{
					html +=
						`<li>
							<div class="layim-chat-user">
								<img src="//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg" alt="">
								<cite>FuRong<i>${item.Time}</i></cite>
							</div>
							<div class="layim-chat-text">${item.Content}</div>
						</li>`;
				}
			});
			html += '</ul>';
			$('#layim_chat_main').empty().html(html);
		});
	});
</script>
</body>
</html>